<template>
  <div>
    <van-nav-bar
      title=""
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div style="width: 90%; margin: 0 auto; position: relative; top: 0px;">
      <div style="height: 40px; line-height: 40px; font-size: 25px; text-align: center;">用户注册</div>

      <van-field v-model="user.userName" label="用户名:" placeholder="请输入用户名" style="margin-top: 15px;" />

      <van-field v-model="user.pwd"  type="password" label="密码:" placeholder="请输入密码" style="margin-top: 10px;" />

      <van-field v-model="user.nickName" label="昵称:" placeholder="请输入昵称" style="margin-top: 10px;" />

      <van-field v-model="user.phone" label="手机号:" placeholder="请输入手机号" style="margin-top: 10px;" />

      <van-field
        v-model="key"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button v-if="!countDown" size="small" color="#ffdd00" type="primary" @click="sendSms" ><span style="color: black">发送验证码</span></van-button>
          <van-button v-else size="small" disabled>{{ countDown }} 秒后重试</van-button>
        </template>
      </van-field>


      <van-button @click="onClick()" type="primary" block style="border-radius: 5px; color: black; background-color: #ffdd00; border-color: #ffdd00; width: 80%; margin: 0 auto; margin-top: 20px; ">
        注册
      </van-button>

      <div style="text-align: center; margin-top: 10px;">
        <van-button type="primary" to="/userLogin" size="small" style="background-color: white; border-color: white; color: brown; font-size: 16px;">
        登录
      </van-button>
      </div>
      
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from 'vant';
export default {
  name: 'UserRegister',
  data(){
    return{
      user:{
        userName: '',
        pwd: '',
        nickName:"",
        phone:"",
      },
      key:"",
      countDown: 0 // 倒计时秒数
    };
  },
  methods:{
    onClickLeft(){
      this.$router.go(-1)
    },
    onClick(){
      if(this.user.phone === ""){
        Toast("手机号不能为空！！");
        return;
      }
      let code = sessionStorage.getItem("code");
      // if (code === this.user.key) {
        if(code === this.key) {
        console.log(code);
        axios.defaults.headers['Content-type'] = 'application/x-www-form-urlencoded;charset=utf-8';
        axios.post(`/api/register`,this.user)
        .then( res =>{
          if (res.data.code === 200) {
            console.log(res.data);
            Toast("注册成功！")
            
            sessionStorage.removeItem("code")
            this.$router.push({path:`/userLogin`})
          } 
        }) 
        .catch( err => {
          console.log(err);
        })
      } else{
        Toast("验证码错误！！");
      }
      
    },
    sendSms() {
      if(this.user.phone === ""){
        Toast("手机号不能为空！！");
        return;
      }
      // 发送验证码操作
      axios.defaults.headers['Content-type'] = 'application/x-www-form-urlencoded;charset=utf-8';
        axios.post(`/api/send?Phone=${this.user.phone}`)
        .then( res =>{
          console.log(res);
          if (res.data.code === 200) {
            //将验证码保存到本地存储
            sessionStorage.setItem("code", res.data.data);
          } else{
            console.log("发送失败");
          } 
        }) 
        .catch( err => {
          console.log(err);
        })

      // 启动计时器
      this.countDown = 60
      const timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--
        } else {
          clearInterval(timer)
        }
      }, 1000)
    }
  },
  
}
</script>
  
<style scoped>
*{
  margin: 0;
  padding: 0;
}
.van-field__label{
  text-align: center;
}
</style>
